<template>
<tc-card>
    <tc-flex direction="column">
      <tc-flex v-show="title" class="header">
        <span class="title">{{ title }}</span>
      </tc-flex>
      <tc-flex direction="column" :class="(index + 1) === list.length ? 'item' : 'item border-bottom'"
        @click="itemClick(index)" v-for="(item, index) of list" :key="index">
        <tc-flex class="width">
          <img class="avatar" :src="item.avatar" alt="">
          <span class="flex-fl title">{{ item.name }}</span>
          <span class="time">{{ item.time }}</span>
        </tc-flex>
        <tc-flex class="width content">
          <div class="title flex-fl">
            <span>{{ item.title }}</span>
          </div>
          <tc-flex class="count">
            <tc-icon :icon="item.read.icon"></tc-icon>
            <span class="name">{{ item.read.count }}</span>
            <tc-icon :icon="item.comment.icon"></tc-icon>
            <span class="name">{{ item.comment.count }}</span>
          </tc-flex>
          <img class="image" :src="item.imageUrl" alt="">
        </tc-flex>
      </tc-flex>
    </tc-flex>
  </tc-card>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import TcCard from '@/controls/TcCard.vue'
  import TcIcon from '@/controls/TcIcon.vue'

  @Component({
    components: {
      TcCard,
      TcIcon
    }
  })
  export default class TcCardList extends Vue{
    @Prop()
    list: any[]

    @Prop()
    title: string

    itemClick (index) {
      this.$emit('itemClick', index)
    }
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@title-color, @time-color, @content-color, @count-name-color){
  .header{
    width: 100%;
    min-height: @tc-card-list-header-height;
    // font-weight: 500;
    font-size: @tc-card-list-title-font-size;
    border-bottom: @border-value;
    
    .title{
      flex: 1;
      margin-left: @tc-card-list-separation;
      text-align: start;
    }
  }
  .border-bottom{
    border-bottom: @border-value;
  }
  .item{
    margin: @tc-card-list-separation;
    padding-bottom: @tc-card-list-separation;

    .avatar{
      width: @tc-card-list-avatar-size;
      height: @tc-card-list-avatar-size;
      border-radius: @tc-card-list-avatar-size;
    }

    .image{
      width: @tc-card-list-image-width;
      height: @tc-card-list-image-height;
      border-radius: @border-radius;
    }

    .width{
      width: 100%;
    }

    .flex-fl{
      flex: 1;
    }

    .title{
      text-align: start;
      color: @title-color;
      font-size: @tc-card-list-title-font-size;
      margin-left: @tc-card-list-separation;
    }

    .time{
      color: @time-color;
      font-size: @tc-card-list-time-font-size;
    }

    .content{
      height: @tc-card-list-content-height;
      position: relative;

      .title{
        margin-left: 0;
        color: @content-color;
        align-self: flex-start;
        margin-top: @tc-card-list-separation;
        padding-right: @tc-card-list-separation;
        font-size: @tc-card-list-content-font-size;
        width: @tc-card-list-content-title-width;
        height: @tc-card-list-content-title-height;

        span{
          width: 100%;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }

    .count{
      justify-content: flex-start;
      position: absolute;
      bottom: 0;
      left: 0;

      .name{
        color: @count-name-color;
        font-size: @tc-card-list-count-font-size;
        margin-right: @tc-card-list-separation*2;
      }

      .icon{
        width: @tc-card-list-icon-size;
        height: @tc-card-list-icon-size;
        margin-right: @tc-card-list-separation;
      }
    }
  }
}
.theme-default{
  .theme(@default-tc-card-list-title-color, @default-tc-card-list-time-color, @default-tc-card-list-content-color, @default-tc-card-list-count-name-color)
}
.theme-dark{
  .theme(@dark-tc-card-list-title-color, @dark-tc-card-list-time-color, @dark-tc-card-list-content-color, @dark-tc-card-list-count-name-color)
}
</style>
